<mat-card class="card">
  <mat-card-header>
    <h3 mat-card-title>
      {{ 'Application Info' | translate }}
    </h3>
    <div class="actions">
      <button
        id="edit-app"
        mat-button
        [ixTest]="[app().name, 'edit']"
        (click)="editButtonPressed()"
      >
        {{ 'Edit' | translate }}
      </button>

      <button
        mat-icon-button
        ixTest="app-info-menu"
        [matMenuTriggerFor]="appInfoMenu"
      >
        <ix-icon name="more_vert"></ix-icon>
      </button>
      <mat-menu #appInfoMenu="matMenu">
        <button
          *ixRequiresRoles="requiredRoles"
          mat-menu-item
          [ixTest]="[app().name, 'update']"
          [disabled]="!app().upgrade_available"
          (click)="updateButtonPressed()"
        >
          {{ 'Update' | translate }}
        </button>
        <button
          *ixRequiresRoles="requiredRoles"
          mat-menu-item
          [ixTest]="[app().name, 'convert']"
          [disabled]="app().custom_app"
          (click)="openConvertDialog()"
        >{{ 'Convert to custom app' | translate}}</button>
      </mat-menu>
    </div>
  </mat-card-header>
  <mat-card-content>
    <div class="info-container">
      <a class="app-logo" [ixTest]="[app().name, 'image-details']" [routerLink]="appDetailsRouterUrl()">
        <img [src]="app().metadata.icon" [src-fallback]="imagePlaceholder" />
      </a>
      <div class="details-list">
        <div class="details-item">
          <div class="label">{{ 'Name' | translate }}:</div>
          @if (app().custom_app) {
            <span class="value">{{ name() | orNotAvailable }}</span>
          } @else {
            <a class="value" [ixTest]="[app().name, 'name-details']" [routerLink]="appDetailsRouterUrl()">
              {{ name() | orNotAvailable }}
            </a>
          }
        </div>
        <div class="details-item">
          <div class="label">{{ 'App Version' | translate }}:</div>
          <div class="value">
            @if (!isCustomApp()) {
              {{ app().metadata.app_version | appVersion | orNotAvailable }}
            } @else if (app().human_version) {
              <!-- Show docker image tag as version for custom apps -->
              {{ app().human_version?.split(':')?.[1]?.split('_')?.[0] }}
            }
          </div>
        </div>
        <div class="details-item">
          <div class="label">{{ 'Version' | translate }}:</div>
          <div class="value">
            @if (!isCustomApp()) {
              {{ app().version | appVersion | orNotAvailable }}
            }
          </div>
        </div>
        <div class="details-item sources">
          <div class="label">{{ 'Source' | translate }}:</div>
          <div class="value">
            <div>
              @for (source of app().metadata.sources; track source; let last = $last) {
                <a
                  class="source-link"
                  target="_blank"
                  [href]="source"
                  [title]="source"
                  [ixTest]="[app().name, 'source']"
                >{{ source | cleanLink }}</a>
                @if (!last) {
                  <span>, </span>
                }
              } @empty {
                {{ 'N/A' | translate }}
              }
            </div>
        </div>
        </div>

        <div class="details-item">
          <div class="label">{{ 'Train' | translate }}:</div>
          <div class="value">
            {{ app().metadata.train | orNotAvailable }}
          </div>
        </div>
        @if (sortedPortals().length > 0) {
          <div class="portals" [class.has-many]="sortedPortals().length > 1">
            @for (portal of sortedPortals(); track portal.label) {
              <button
                mat-button
                class="portal-button"
                [ixTest]="['portal', app().name, portal.label]"
                [matTooltip]="portal.url"
                (click)="openPortalLink(app(), portal.label)"
              >
                {{ portal.label }}
              </button>
            }
          </div>
        }
      </div>
    </div>
  </mat-card-content>

  @if (app()) {
    <mat-card-actions>
      <div class="cell cell-action cell-status-actions">
        <ng-container *ixRequiresRoles="requiredRoles">
          @if (isAppStopped()) {
            <button
              mat-button
              matTooltipPosition="above"
              [ixTest]="[app().name, 'start']"
              [matTooltip]="'Start' | translate"
              [disabled]="inProgress()"
              (click)="startApp.emit(); $event.stopPropagation()"
            >
              <ix-icon name="mdi-play-circle"></ix-icon> {{ 'Start' | translate }}
            </button>
          }
        </ng-container>
        <ng-container *ixRequiresRoles="requiredRoles">
          @if (!isAppStopped()) {
            <button
              mat-button
              matTooltipPosition="above"
              [ixTest]="[app().name, 'stop']"
              [matTooltip]="'Stop' | translate"
              [disabled]="inProgress()"
              (click)="stopApp.emit(); $event.stopPropagation()"
            >
              <ix-icon name="mdi-stop-circle"></ix-icon> {{ 'Stop' | translate }}
            </button>
          }
        </ng-container>
      </div>

      @if (isRollbackPossible()) {
        <button
          *ixRequiresRoles="requiredRoles"
          mat-button
          [ixTest]="[app().name, 'rollback']"
          (click)="rollbackApp()"
        >
          {{ 'Roll Back' | translate }}
        </button>
      }

      <button
        *ixRequiresRoles="requiredRoles"
        mat-button
        [ixTest]="[app().name, 'delete']"
        (click)="deleteButtonPressed()"
      >
        {{ 'Delete' | translate }}
      </button>
    </mat-card-actions>
  }
</mat-card>
